<template>
    <div id="homeView">
<!--      <div id="banner">-->
<!--        <carousel-3d :autoplay="true"-->
<!--                     :autoplayTimeout="3000"-->
<!--                     :display="3"-->
<!--                     :width="900"-->
<!--                     :height="298"-->
<!--                     :perspective="3"-->
<!--                     :animationSpeed="500"-->
<!--                     :controlsVisible="true">-->
<!--          <slide :index="0">-->
<!--          </slide>-->
<!--          <slide :index="1">-->
<!--            Slide 1 Content-->
<!--          </slide>-->
<!--          <slide :index="2">-->
<!--            Slide 2 Content-->
<!--          </slide>-->
<!--          <slide :index="3">-->
<!--            Slide 3 Content-->
<!--          </slide>-->
<!--          <slide :index="4">-->
<!--            Slide 4 Content-->
<!--          </slide>-->
<!--          <slide :index="5">-->
<!--            Slide 5 Content-->
<!--          </slide>-->
<!--        </carousel-3d>-->
<!--      </div>-->
<!--      <div id="guessYouLikeBox">-->
<!--        <h2>猜你喜欢</h2>-->
<!--        <div id="likeBox">-->
<!--          <div class="guessLike"><span class="toRight-10 ">电影</span></div>-->
<!--          <div class="guessLike"><span class="toRight-10 ">游戏</span></div>-->
<!--          <div class="guessLike"><span class="toRight-10 ">音乐</span></div>-->
<!--          <div class="guessLike"><span class="toRight-10 ">其它</span></div>-->
<!--        </div>-->
<!--      </div>-->
      <div id="banner" style="width: 100%;margin: 0 auto">
      <el-carousel :interval="4000" type="card" trigger="click" height="200px">
        <el-carousel-item v-for="item in gameTop.slice(0,2)" :key="item.gameId+'-game'">
          <router-link :to="'/home/game/'+ item.gameNameEn">
            <p style="background-color: #9e5bdf">{{item.gameName}}</p>
            <h1><span class="labInfo" style="color: white;background-color: #9e5bdf;">游戏</span><span class="labInfo" v-for="lab in (item.gameTags || ' ').split(' ')" :key="lab.id">{{lab}}</span></h1>
            <img :src="item.gameImg" alt="">
            <img class="backImg" :src="item.gameImg" alt="">
          </router-link>
        </el-carousel-item>
        <el-carousel-item v-for="movieItem in movieTop.slice(0,2)" :key="movieItem.movieId+'-movie'">
          <router-link :to="'/home/movie/'+ movieItem.movieNameEn">
            <p style="background-color: #0a80c1">{{movieItem.movieName}}</p>
           <h1><span class="labInfo" style="color: white;background-color: #0a80c1;">电影</span><span class="labInfo" v-for="lab in (movieItem.movieGen || ' ').split(' ').slice(1,2)" :key="lab.id">{{lab}}</span></h1>
          <img :src="movieItem.movieImg" alt="">
          <img class="backImg" :src="movieItem.movieImg" alt="">
          </router-link>
        </el-carousel-item>
        <el-carousel-item v-for="musicItem in musicTop.slice(0,2)" :key="musicItem.musicId+'-music'">
          <router-link :to="'/home/music/'+ musicItem.musicNameEn">
            <p style="background-color: #31c27c">{{musicItem.musicName}}</p>
            <h1><span class="labInfo" style="color: white;background-color: #31c27c;">音乐</span><span class="labInfo" v-for="lab in (musicItem.musicGen || ' ').split(' ')" :key="lab.id">{{lab}}</span></h1>
            <img :src="musicItem.albumImg" alt="">
            <img class="backImg" :src="musicItem.albumImg" alt="">
          </router-link>
        </el-carousel-item>
      </el-carousel>
      </div>
      <hot-movies/>
      <hot-game/>
      <hot-music/>
    </div>
</template>

<script>
  import hotMovies from './hotMovies'
  import hotGame from './hotGame'
  import hotMusic from './hotMusic'
  import api from "../../model/api";


  export default {
    name: 'homeView',
    components:{
      hotMovies,
      hotGame,
      hotMusic,
    },
    data(){
      return{
        gameTop:[],
        movieTop:[],
        musicTop:[],
      }
    },
    methods:{
      getGameTop(){
        api.getGameTop().then(res =>{
          this.gameTop = res.data
        })
      },
      getMovieTop(){
        api.getMovieTop().then(res =>{
          this.movieTop = res.data
        })
      },
      getMusicTop(){
        api.getMusicTop().then(res =>{
          this.musicTop = res.data
        })
      },
    },
    created() {
      this.getGameTop()
      this.getMovieTop()
      this.getMusicTop()
    }

  }

</script>

<style lang="less" scoped>
  #homeView{
    width: calc(100% - 50px);
    margin: 60px 30px 0 30px;
    /*display: flex;*/
    /*flex-flow: column;*/

    #banner{
      p{
        margin: 20px 0 0 0;
        float: right;
        /*background-color: white;*/
        padding: 5px 70px 5px 10px;
        font-size: 40px;
        border-radius: 6px 0 0 6px;
        font-weight: 400;
        color: white;
      }
    }
    h2{
      margin-bottom: 10px;
    }
    .brImg{
      width: 500px;
    }
    #likeBox{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      .guessLike{
        width: 440px;
        height: 200px;
        background-color: red;
        border-radius: 12px;

      }
    }
      #guessYouLikeBox{
      width: 100%;
      background-color: #67ff81;
      margin-top: 60px;
    }

    /******************/

    .more{
      font-size: 16px;
      display: flex;
      padding: 30px 0;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
    .el-carousel  {
      position: relative;
      img{
        position: absolute;
        height: 100%;
        box-shadow: 5px 0 20px rgba(0, 0, 0, 0.60);
        left: 0;
        z-index: +1;

      }
     h1{
       position: absolute;
       right: 20px;
       bottom: 20px;
       font-size: 16px;
       font-weight: 400;
       /*background-color: white;*/
       /*padding: 5px 10px;*/
       border-radius: 6px;
       transition: all 0.2s ease-in-out;
       display: flex;
       align-items: center;
       z-index: +1000;
     }
     .backImg{
       width: 100%;
       height: auto;
       position: absolute;
       top: -100%;
       left: 0;
       overflow: hidden;
       z-index:-1;
       filter: blur(7px);
     }
    }
 }

</style>
